<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/size.css"/>
	</head>
	<body>
		<div id="content">
			<!--顶部-->
			<div id="hearder">
				<div class="top-logo">
					<img src="img/logo.gif"/>
				</div>
				<!--顶部-->
				<div class="top-home">
					<div class="home">
					<a href="#"><img src="img/header_home_menu.gif"/></a>
					<a href="#">繁</a>
					<a href="#">En</a>
					<img src="img/header_tel_menu.gif"/>
					<span class="phone">95568</span>
					</div>
					
					<input type="text" name="" id="text" value="" placeholder="请输入关键词"/>
					<input type="button" name="" id="btn" value="" />
					
				</div>
				<!--顶部右侧-->
				<div class="top-login">
					<p>网上银行登录</p>
					<ul>
						<li><a href="#">个人网上银行</a><span>></span></li>
						<li><a href="#">小微网上银行</a><span>></span></li>
						<li><a href="#">企业网上银行</a><span>></span></li>
						<li><a href="#">香港企业银行</a><span>></span></li>
					</ul>
				</div>
				<div class="clear"></div>
				<!--导航条-->
				<div class="nav">
					
					<ul>
						<li>
							<a href="#">个人金融</a>
							<div class="list">
							<dl> <dt><a href="#">银行卡</a></dt> </dl>
								<dl><dt><a href="#">理财</a></dt></dl>
								
								<dl><dt><a href="#">基金</a></dt></dl>
								
								<dl><dt><a href="#">贵金属</a></dt></dl>
								<dl><dt><a href="#">储蓄</a></dt></dl>
								
								<dl><dt><a href="#">贷款</a></dt></dl>
								
								<dl><dt><a href="#">出国金融</a></dt></dl>
								
								<dl><dt><a href="#">便利金融</a></dt></dl>
								
								<dl><dt><a href="#">账户交易产品</a></dt></dl>
								
								<dl><dt><a href="#">个人手机银行</a></dt></dl>
								
								<dl><dt><a href="#">个人网上银行</a></dt></dl>
							</div>
						</li>
	
						<li>
							<a href="#">小微金融</a>
							<div class="list">
							<dl> <dt><a href="#">融资产品</a></dt> </dl>
							<dl> <dt><a href="#">支付结算</a></dt> </dl>
								<dl><dt><a href="#">小微之家</a></dt></dl>
								
								<dl><dt><a href="#">特色产品</a></dt></dl>
								
								<dl><dt><a href="#">特色服务</a></dt></dl>
								<dl><dt><a href="#">综合金融服务</a></dt></dl>
								
								<dl><dt><a href="#">电子银行</a></dt></dl>
								
								<dl><dt><a href="#">小微手机银行</a></dt></dl>
								
								<dl><dt><a href="#">便利金融</a></dt></dl>
								
								<dl><dt><a href="#">小微网上银行</a></dt></dl>
								
							</div>
						</li>
						<li>	
							<a href="#">电子银行</a>
						<div class="list">
							<dl> <dt><a href="#">手机银行</a></dt> </dl>
							<dl> <dt><a href="#">移动支付</a></dt> </dl>
								<dl><dt><a>个人网上银行</a></dt></dl>
								<dl><dt><a>企业网上银行</a></dt></dl>
								<dl><dt><a href="#">微信银行</a></dt></dl>
								
								<dl><dt><a href="#">电话银行</a></dt></dl>
								
								<dl><dt><a href="#">95568财富圈</a></dt></dl>
								
								<dl><dt><a href="#">跨行通</a></dt></dl>
								
								<dl><dt><a href="#">积分说明</a></dt></dl>
								
								<dl><dt><a href="#">安全提示</a></dt></dl>
					
							</div>
						</li>
						<li>
                        <a href="#">公司金融</a>
						<div class="list">
							<dl> <dt><a href="#">产业链金融</a></dt> </dl>
								<dl><dt><a href="#">现金管理</a></dt></dl>
								
								<dl><dt><a href="#">交易银行</a></dt></dl>
								
								<dl><dt><a href="#">现金宝</a></dt></dl>
								<dl><dt><a href="#">基本业务</a></dt></dl>
								
								<dl><dt><a href="#">投资银行</a></dt></dl>
								
								<dl><dt><a href="#">贵金属对公金融</a></dt></dl>
								
								<dl><dt><a href="#">资产托管</a></dt></dl>
								
								<dl><dt><a href="#">养老金业务</a></dt></dl>
								
							</div
						</li>

						<li>
							<a href="#">同业金融</a>
						<div class="list">
							<dl> <dt><a href="#">资金融通</a></dt> </dl>
								<dl><dt><a href="#">资金交易</a></dt></dl>
								
								<dl><dt><a href="#">银银合作</a></dt></dl>
								
								<dl><dt><a href="#">银证合作</a></dt></dl>
								<dl><dt><a href="#">银信合作</a></dt></dl>
								
								<dl><dt><a href="#">银保合作</a></dt></dl>
								
								<dl><dt><a href="#">银期合作</a></dt></dl>
								
								<dl><dt><a href="#">综合性合作</a></dt></dl>		
		
							</div>
						</li>
						
						<li>
							<a href="#">私人银行</a>
						<div class="list">
							<dl> <dt><a href="#">金融服务</a></dt> </dl>
								<dl><dt><a href="#">非金融服务</a></dt></dl>
								<dl><dt><a href="#">最新动态</a></dt></dl>
								<dl><dt><a href="#">关于我们</a></dt></dl>
							</div>
						</li>
						<li>
							<a href="#">信用卡</a>
						<div class="list">
							<dl> <dt><a href="#">信用卡申请</a></dt> </dl>
								<dl><dt><a href="#">功能服务</a></dt></dl>
								
								<dl><dt><a href="#">动态信息</a></dt></dl>
								
								<dl><dt><a href="#">分期付款</a></dt></dl>
								<dl><dt><a href="#">积分专区</a></dt></dl>
								
								<dl><dt><a href="#">电子银行</a></dt></dl>
								
								<dl><dt><a href="#">民生商城</a></dt></dl>
								
								<dl><dt><a href="#">客户服务</a></dt></dl>
								
							</div>
						</li>
				
						<li>
							<a href="#">直销银行</a>
						<div class="list">
							<dl> <dt><a href="#">开立账户</a></dt> </dl>
								<dl><dt><a href="#">随心存</a></dt></dl>
								
								<dl><dt><a href="#">如意宝</a></dt></dl>
								
								<dl><dt><a href="#">定活宝</a></dt></dl>
								<dl><dt><a href="#">基金通</a></dt></dl>
								
								<dl><dt><a href="#">银行理财</a></dt></dl>
								
								<dl><dt><a href="#">民生金</a></dt></dl>
								
								<dl><dt><a href="#">利多多</a></dt></dl>
								
								<dl><dt><a href="#">轻松汇</a></dt></dl>
								
								<dl><dt><a href="#">账户协议</a></dt></dl>
								
								<dl><dt><a href="#">关于我们</a></dt></dl>
							</div>
						</li>
						<li>
							<a href="#">今日民生</a>
						<div class="list">
							<dl> <dt><a href="#">关于民生</a></dt> </dl>
								<dl><dt><a href="#">民生动态</a></dt></dl>
								<dl><dt><a href="#">投资者关系</a></dt></dl>
								<dl><dt><a href="#">民生招聘</a></dt></dl>
								<dl><dt><a href="#">社会责任</a></dt></dl>
							</div>
						</li>
					</ul>
				</div>
				
			</div>

			
			<div id="main">
				<!--轮播图-->
				<div class="main-img">
					<ul>
						<li class="listImg"><img src="img/fangzhapian1200.jpg" /></li>
						<li class="listImg"><img src="img/jjzs20151200.jpg"/></li>
						<li class="listImg"><img src="img/minshengdaecundan1200.jpg"/></li>
						<li class="listImg"><img src="img/nrh1200.jpg"/></li>
					</ul>
					<div class="tips">
						<div class="tips-op"></div>
						<div class="word"><p>重要公告：中国民生银行关于2017年4月9日信用卡发卡系统升级维...  更多></div>
				   <div class="tips-img"> 
						<img src="img/fangzhapiansuo.jpg" class="small-img" style="position: relative;top: -10px;"/>
						<img src="img/jjzs2015suo.jpg" class="small-img"/>
						<img src="img/minshengdaecundansuo.jpg" class="small-img"/>
					    <img src="img/nrhslt.jpg"class="small-img"/>
				   </div>
			</div>
		</div>
		   
              <!--开立账户-->
		<div class="list-menu">
				
				<div class="menu">
					<dl>
						<dt>开立账户</dt>
						<dd><span></span>简单安全</dd>
						<dd><span></span>任意银行卡即可加入</dd>
						<dd><span></span>纯线上开户，互联网银行</dd>
					</dl>
					
				</div>
				<div class="menu">
					<dl>
						<dt class="newDt">优惠活动</dt>
					
						<dd class="newDd"><span></span>民生同道大叔星座主题卡高萌发射</dd>
						<dd class="newDd"><span></span>“无极票号”醇酒佳酿定制理财享不停</dd>
						<dd class="newDd"><span></span>2017女神节为美而购 买坠就送金玫瑰</dd>
					</dl>
					<p>更多<span style="color: #00a597;">></span></p>
				</div>
				<div class="menu">
					<dl>
						<dt class="newDt">投资理财</dt>
						<dd class="newDd"><span></span>100万起 翠竹理财周四尊享03款</dd>
						<dd class="newDd"><span></span>非凡资产季增利第279期高端02款</dd>
						<dd class="newDd"><span></span>非凡资产126天增利第279期高端02款</dd>
					</dl>
					<p>更多<span style="color: #00a597;">></span></p>
					
				</div>
				<div class="menu">
					
					<dl>
						<dt class="newDt">客户服务</dt>
						<dd class="newDd1"><span></span>服务网点</dd>
						<dd class="newDd1"><span></span>在线客服</dd>
						<dd class="newDd1"><span></span>资费标准</dd>
						<dd class="newDd1"><span></span>存贷利率</dd>
						<dd class="newDd1"><span></span>民新指数</dd>
						<dd class="newDd1"><span></span>外汇贵金属行情</dd>
					</dl>
					<p class="p-more">更多<span style="color: #00a597;">></span></p>
					
				</div>
				
			</div>
			<div class="clear"></div>
			<!--关于民生-->
		<div class="list-box">
			<div class="box-menu">
				<dt class="newDt">关于民生</dt>
						<dd >民生简介</dd>
						<dd>董事会介绍</dd>
						<dd>监事会介绍</dd>
						<dd>管理层介绍</dd>
						<dd >附属机构</dd>
						
					</dl>
			</div>

			<div class="box-menu">
			<dt class="newDt">民生动态</dt>
						<dd >民生新闻</dd>
						<dd>媒体关注</dd>
						<dd>研究报告</dd>
						<dd>民生宣传片</dd>
						<dd >民生荣誉</dd>
						
					</dl>
			</div>

			<div class="box-menu">
				<dt class="newDt">投资者关系</dt>
						<dd >公司治理</dd>
						<dd>董事会介绍</dd>
						<dd>财务摘要</dd>
						<dd>投资者服务</dd>
						<dd >社会责任</dd>
						
					</dl>
				
			</div>

			<div class="box-menu">
				<dt class="newDt">民生招聘</dt>
						<dd >社会招聘</dd>
						<dd>校园招聘</dd>
						<dd>招聘公告</dd>
						<dd>应聘流程</dd>
						<dd >企业文化</dd>
						
					</dl>
			</div>





			<div class="box-menu">
				<dt class="newDt">便捷服务</dt>
						<dd >民生商城</dd>
						<dd>备付金查询</dd>
						<dd>手机充值</dd>
						<dd>养老金查询</dd>
						<dd >积分专区</dd>
						
					</dl>
			</div>
			<div class="box-menu">
				<dt class="newDt">联系我们</dt>
						<dd >服务网点</dd>
						<dd>自助设备</dd>
						<dd>分行网站</dd>
						<dd>咨询与投诉</dd>
						<dd >95568</dd>
						
					</dl>
			</div>
			<div class="clear"></div>
	</div>
          <!--底部版权声明-->
		<div id="footer">
			<span>版权所有:中国民生银行 京ICP备05020372号</span>
			<ul>
				<li><a href="#">法律声明</a></li>
				<li><a href="#">隐私权政策</a></li>
				<li><a href="#">网站地图</a></li>
				<li><a href="#">友情链接</a></li>
				<li><a href="#">电子邮件</a></li>
			</ul>
			
			
			
			
			<div class="footer-img">
	         <a href="#"><img src="img/copy_right_icon_1.gif"/></a>
			<a href="#"><img src="img/copy_right_icon_2.gif"/></a>
			<a href="#"><img src="img/copy_right_icon_3.gif"/></a>
			<a href="#"><img src="img/copy_right_icon_4.gif"/></a>
			</div>
		</div>
		</div>
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
		<script type="text/javascript">
          $(document).ready(function(){
          	
          	var img=document.getElementsByClassName("listImg");
	        var img1=document.getElementsByClassName("small-img")[0];
	        var img2=document.getElementsByClassName("small-img")[1];
	        var img3=document.getElementsByClassName("small-img")[2];
	        var img4=document.getElementsByClassName("small-img")[3];
	        var current=0;	 
	        var i=0;
	        img1.style.top="-10px";
	      	var time=setInterval(function(){
	      			fadeout(current);
	      			current=(current+1)%4;
	      			i=(i+1)%4;
	          if (i==0) {
	          
					img1.setAttribute("class","on");
					img2.removeAttribute("class");
					img3.removeAttribute("class");
					img4.removeAttribute("class");
				
					
				}if (i==1) {
					img2.setAttribute("class","on");
					img1.removeAttribute("class");
					img3.removeAttribute("class");
					img4.removeAttribute("class");
					img1.removeAttribute("style");
					
					
				}if (i==2) {
					
					img3.setAttribute("class","on");
					img2.removeAttribute("class");
					img1.removeAttribute("class");
					img4.removeAttribute("class");
				
					
					
					
				}if (i==3) {
					img4.setAttribute("class","on");
					img2.removeAttribute("class");
					img3.removeAttribute("class");
					img1.removeAttribute("class");
				
					
				}
                    
	      		

	      			fadein(current);
	      			
	      		},3000);
	      		//轮播图片上一张淡出
	      		function fadeout(cur){
	      			var value=100;

	      			
	      	setInterval(function(){
	      			value=value-5;
	      				
	      				if (value<0) {
	      					return;
	      				}
	      				img[cur].style.opacity=value/100;
	      				
	      				
	      			},50)
	      			
	      			
	      		};
	      		
	      		
	      		//轮播图片上下张淡入
	      		
	      		function fadein(tar){
	      			var value=0;
	      			
	      	
	      		setInterval(function(){	
	      			value=value+5;
	      				if (value>100) {
	      					return;
	      				}
	      				
	      		img[tar].style.opacity=value/100;

	      			},50)
	      			
	      			
	      			
	      		};
                  //鼠标经过停止轮播//
                var mainImg=document.getElementsByClassName("main-img")[0];
                mainImg.onmouseenter=function(){
           img1.removeAttribute("style");
             $(".tips-img img").removeClass("on");
                	
                clearInterval(time);
              
                }
          	
                  //鼠标移开轮播开始//
      
          	mainImg.onmouseleave=function(){
             
          		
             time=setInterval(function(){
	      		
	      			fadeout(current);

	      			current=(current+1)%4;


	                i=(i+1)%4;
	      			
	      			if (i==0) {
					img1.setAttribute("class","on");
					img2.removeAttribute("class");
					img3.removeAttribute("class");
					img4.removeAttribute("class");
				
					
				}if (i==1) {
					img2.setAttribute("class","on");
					img1.removeAttribute("class");
					img3.removeAttribute("class");
					img4.removeAttribute("class");
					
					
					
				}if (i==2) {
					
					img3.setAttribute("class","on");
					img2.removeAttribute("class");
					img1.removeAttribute("class");
					img4.removeAttribute("class");
					
				}if (i==3) {
					img4.setAttribute("class","on");
					img2.removeAttribute("class");
					img3.removeAttribute("class");
					img1.removeAttribute("class");
				}
                    

	      			fadein(current);
	      			
	      		},3000);
          		
          		
          	};
    
          	
        $(".tips-img img").mouseover(function(){
           
             $(".tips-img img").removeClass("off");
        	$(this).addClass("on");
        
        	var currentIndex= $(this).index();
            if (currentIndex==0) {
        	img[currentIndex].style.opacity=1;
        	img[1].style.opacity=0;
        	img[2].style.opacity=0;
        	img[3].style.opacity=0;
            	
            };
  if (currentIndex==1) {
        	img[currentIndex].style.opacity=1;
        	img[0].style.opacity=0;
        	img[2].style.opacity=0;
        	img[3].style.opacity=0;
            	
           };

  if (currentIndex==2) {
        	img[currentIndex].style.opacity=1;
        	img[1].style.opacity=0;
        	img[0].style.opacity=0;
        	img[3].style.opacity=0;
            	
           };
             if (currentIndex==3) {
        	img[currentIndex].style.opacity=1;
        	img[1].style.opacity=0;
        	img[2].style.opacity=0;
        	img[0].style.opacity=0;
            	
            };
        $(".tips-img img").mouseleave(function(){
                
              	 $(".tips-img img").removeClass("on");
              	
              	$(this).addClass("off");
        
           
           
           
           
              })
        	
        });
             
 
         });

		</script>
	</body>
</html>
